<script lang="ts" setup>
import { useSlots, ref } from 'vue'
import { mStyles } from '@/utils/useStyles'
import { createExposeProxy } from '@/utils/exposeProxy'

const props = defineProps({
    iText: {
        type: String,
        default: ''
    },
    iClose: {
        type: Boolean,
        default: true
    },
    iButton: {
        type: Boolean,
        default: true
    },
    iBgColor: {
        type: String,
        default: ''
    },
    iPadding: {
        type: String,
        default: ''
    },
    iTextAlign: {
        type: String,
        default: 'center'
    },
    iCloseIconTop: {
        type: String,
        default: ''
    },
    iCloseIconRight: {
        type: String,
        default: ''
    }
});

//是否显示关闭按钮
const mcloseIcon = ref(props.iClose)


//是否显示确认按钮
const mConfirm = ref(props.iButton)

const slots = useSlots();
const mIsClose = ref(false);
//打开动作面板
const openDialog = (): void => {
    mIsClose.value = true;
}

//关闭动作面板
const closeDialog = (): void => {
    mIsClose.value = false;
}

const emit = defineEmits(['is-Confirm'])
//确定按钮点击
const closeConfirm = () => {
    emit('is-Confirm');
}

const actionRef = ref();

//暴露方法
defineExpose(createExposeProxy({ openDialog, closeDialog }, actionRef))
</script>

<template>
    <van-action-sheet v-model:show="mIsClose" closeable ref="actionRef" v-bind="$attrs"
        :style="{ background: props.iBgColor }">
        <template v-for="(value, name) in slots" #[name]="scope">
            <div class="gr-content" :style="`padding: ${iPadding}; text-align: ${iTextAlign};`">
                <svg t="1753867767393" class="icon gr-close" viewBox="0 0 1024 1024" version="1.1" :style="`top: ${iCloseIconTop};right: ${iCloseIconRight};`"
                    xmlns="http://www.w3.org/2000/svg" p-id="5316" width="5vmin" height="5vmin" @click="closeDialog()"
                    v-show="mcloseIcon">
                    <path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#EBEBEB" p-id="5317"
                        data-spm-anchor-id="a313x.search_index.0.i12.5e3f3a81w8wbkD" class=""></path>
                    <path
                        d="M682.33187 311.150749m19.223292 19.223293l0 0q19.223292 19.223292 0 38.446584l-331.601792 331.601793q-19.223292 19.223292-38.446585 0l0 0q-19.223292-19.223292 0-38.446585l331.601792-331.601792q19.223292-19.223292 38.446585 0Z"
                        fill="#2C2C2C" p-id="5318" data-spm-anchor-id="a313x.search_index.0.i17.5e3f3a81w8wbkD"
                        class="selected"></path>
                    <path
                        d="M312.283493 349.597334m19.223292-19.223292l0 0q19.223292-19.223292 38.446585 0l331.601792 331.601792q19.223292 19.223292 0 38.446585l0 0q-19.223292 19.223292-38.446585 0l-331.601792-331.601793q-19.223292-19.223292 0-38.446584Z"
                        fill="#2C2C2C" p-id="5319" data-spm-anchor-id="a313x.search_index.0.i16.5e3f3a81w8wbkD"
                        class="selected"></path>
                </svg>

                <slot :name="name" v-bind="scope || {}"></slot>
                <cButton iLinearGradien class="w-[100%] mt-[35px]" :text="props.iText" :iColor="mStyles.color10"
                    @click="closeConfirm()" v-if="mConfirm" round></cButton>
            </div>
        </template>
    </van-action-sheet>
</template>

<style lang="scss" scoped>
.gr-content {
    padding: 35px 60px 60px 60px;
    max-height: 1400px;
    box-sizing: border-box;
    text-align:center;
    .gr-close {
        position: absolute;
        right: 40px;
        top: 50px;
        font-size: 50px;
    }
}
</style>